<template>
    <div class="root">
        <timers></timers>
        <div class="container">
            <h1>手机号注册</h1>
            <div class="linecontainer first">
                <div class="type">昵称</div>
                <div class="input">
                    <input type="text" v-model="formMsg.userName" placeholder="例如：陈晨">
                </div>
                <div class="fa fa-camera-retro fa-2x photo" ref="self">
                    <input type="file" name="" @change="changeimg" id="upload" accept="image/*">
                    <!-- <button @click="heihei">ok</button> -->
                </div>
            </div>
            <div class="linecontainer">
                <div class="type">手机号</div>
                <div class="input">
                    <input type="text" v-model="formMsg.phone" placeholder="请填写手机号">
                </div>
            </div>
            <div class="linecontainer">
                <div class="type">密码</div>
                <div class="input">
                    <input type="password" v-model="formMsg.password" placeholder="填写密码">
                </div>
            </div>
            <div class="linecontainer end">
                <div class="radio">
                    <input type="radio" @click="change" :checked="mis">已阅读并同意<span>《软件许可及服务协议》</span>
                </div>
            </div>
            <button ref="register" @click="toregister" :disabled="btntroggle">注册</button>
        </div>
        <span class="fa fa-chevron-left btn" @click="back"></span>
    </div>
</template>

<script>
// 一个js模块 可以很方便的让我们编码和解码
// const Base64 = require('js-base64').Base64;
export default {
    data(){
        return{
            formMsg:{
                userName:'',
                phone:'',
                password:'',
                imgscr:'',
                imgname:''
            },
            mis:false,
            btntroggle:true
        }
    },
    watch:{
        // 要监听的是一个属性的子属性  使用''包裹起来
        'formMsg.userName':function(newmsg,oldmsg){
            if(newmsg!==''){
                this.canregister()
            }
        },
        'formMsg.phone':function(newmsg,oldmsg){
            if(newmsg!==''){
                this.canregister()
            }
        },
        'formMsg.password':function(newmsg,oldmsg){
            if(newmsg!==''){
                this.canregister()
            }
        },
        'formMsg.imgscr':function(newmsg,oldmsg){
            if(newmsg!==''){
                this.canregister()
            }
        }
    },
    methods:{
        canregister(){
            // console.log('666')
            if(this.formMsg.userName!==''&&this.formMsg.phone!==''&&this.formMsg.password!==''&&this.formMsg.imgscr!==''&&this.mis===true){
                // console.log(this.mis)
                // console.log(666)
                this.$refs.register.classList.add('butstyle')
                this.btntroggle = false
            }else{
                this.btntroggle = true
            }
            // this.$refs.register.classList.remove('butstyle')
        },
        change(){
            this.mis = !this.mis
            this.canregister()
        },
        async toregister(){
            // alert('注册成功')
            // this.$router.push('/login')
            const {data:code} = await this.$http.post('/api/userregister',this.formMsg)
            if(code.code === 1062){
                alert('一个手机号只能注册一次哦~')
                this.formMsg.userName = ''
                this.formMsg.phone = ''
                this.formMsg.password = ''
                this.formMsg.imgscr = ''
                this.formMsg.imgname = ''
            }else if(code.code === 200){
                alert('注册成功，可以去登录啦~')
                this.$router.push('/login')
            }
        },
        back(){
            this.$router.push('/')
        },
        changeimg(e){
            const files = e.target.files[0]
            const render = new FileReader()
            let imgFile
            // let that = this
            render.readAsDataURL(files)
            render.onload = e => {
                imgFile = e.target.result;
                // console.log(imgFile)
                // console.log(Base64.decode(imgFile))
                const arr = imgFile.split(',')
                this.formMsg.imgname = arr[0]
                this.formMsg.imgscr = arr[1]
                this.$refs.self.style.color = 'rgb(12, 203, 25)'
                this.canregister()
                // console.log(imgFile)
                // console.log(imgsrc)
            }
        }
    },
    mounted(){
        // console.log(this.$store.state.weather)
    }
}
</script>

<style lang="less" scoped>
    .root{
        width: 100vw;
        height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .container{
        width: 95vw;
        height: 100%;
        // border: 1px solid #ccc;
    }
    h1{
        font-weight: normal;
        margin: 50px 0 50px 20px;
    }
    .linecontainer{
        width: 100%;
        height: 55px;
        // background-color: skyblue;
        border-bottom: 1px solid #bbb;
        display: flex;
        .type{
            width: 80px;
            height: 55px;
            // background-color: #bfa;
            display: flex;
            // justify-content: center;
            // margin-left: 10px;
            padding-left: 15px;
            align-items: center;
        }
        .input{
            height: 55px;
            flex-grow: 1;
            // background-color: #2ecc71;
            input{
                width: 100%;
                height: 100%;
                border: none;
                background: none;
                outline: none;
            }
        }
        .photo{
            width: 55px;
            height: 55px;
            // background-color: #3498db;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            #upload{
                position: absolute;
                left: 0px;
                display: inline-block;
                width: 55px;
                height: 55px;
                opacity: 0;
            }
        }
        .radio{
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 13px;
            span{
                color: rgb(26, 26, 166);
            }
        }
    }
    .first{
        border-bottom: 1px solid rgb(12, 203, 25);
    }
    .end{
        border: none;
    }
    button{
        width: 100%;
        height: 50px;
        background-color: rgb(226, 226, 226);
        border: none;
        outline: none;
        border-radius: 5px;
        color: rgb(184, 184, 184);
        font-size: 20px;
    }
    .btn{
        position: absolute;
        top: 15px;
        left: 10px;
    }
    .butstyle{
        background-color:rgb(12, 203, 25);
        color: white;
    }
</style>
